/*! _checkboxes.scss | Vuero | Css ninja 2020-2021 */

/*
    1. Animated Checkbox
    2. Animated Checkbox Dark mode
    3. Checkbox List
    4. Regular Checkbox / Radio
    5. Regular Checkbox / Radio Dark mode
*/

/* ==========================================================================
1. Animated Checkbox
========================================================================== */

/* $curve: cubic-bezier(0.65, 0, 0.45, 1);

.animated-checkbox {
  position: relative;
  height: 32px;
  width: 32px;

  &.is-purple {
    .checkmark-circle {
      color: var(--purple) !important;
    }

    .checkmark {
      box-shadow: inset 0 0 0 var(--purple) !important;
    }

    .checkmark-check {
      color: var(--purple) !important;
    }
  }

  &.is-info {
    .checkmark-circle {
      color: var(--info) !important;
    }

    .checkmark {
      box-shadow: inset 0 0 0 var(--info) !important;
    }

    .checkmark-check {
      color: var(--info) !important;
    }
  }

  &.is-success {
    .checkmark-circle {
      color: var(--success) !important;
    }

    .checkmark {
      box-shadow: inset 0 0 0 var(--success) !important;
    }

    .checkmark-check {
      color: var(--success) !important;
    }
  }

  &.is-warning {
    .checkmark-circle {
      color: var(--warning) !important;
    }

    .checkmark {
      box-shadow: inset 0 0 0 var(--warning) !important;
    }

    .checkmark-check {
      color: var(--warning) !important;
    }
  }

  &.is-danger {
    .checkmark-circle {
      color: var(--red) !important;
    }

    .checkmark {
      box-shadow: inset 0 0 0 var(--red) !important;
    }

    .checkmark-check {
      color: var(--red) !important;
    }
  }

  input {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
  }

  .checkmark-wrap {
    position: relative;
    height: 32px;
    width: 32px;

    .shadow-circle {
      position: absolute;
      top: 0;
      left: 0;
      height: 32px;
      width: 32px;
      border-radius: var(--radius-rounded);
      border: 1px solid var(--placeholder);
      z-index: 0;
      opacity: 1;
      transition: all 0.2s;

      &.is-opaque {
        opacity: 0;
      }
    }

    .checkmark-circle {
      height: 32px;
      width: 32px;
      stroke-dasharray: 166;
      stroke-dashoffset: 166;
      stroke-width: 2;
      stroke-miterlimit: 10;
      fill: none;
      color: var(--primary);
    }

    //Checkmark
    .checkmark {
      width: 32px;
      height: 32px;
      border-radius: var(--radius-rounded);
      display: block;
      stroke-width: 2;
      color: var(--placeholder);
      stroke-miterlimit: 10;
      margin: 0 auto;
      box-shadow: inset 0 0 0 var(--primary);
    }

    //Check symbol
    .checkmark-check {
      transform-origin: 50% 50%;
      stroke-dasharray: 48;
      stroke-dashoffset: 48;
      color: var(--primary);
    }
  }

  &.is-checked {
    .checkmark-circle {
      animation: stroke 0.6s $curve both;
    }

    .checkmark-check {
      animation: stroke 0.3s $curve 0.8s both;
    }
  }

  &.is-unchecked {
    .checkmark-circle {
      animation: reverseCircle 0.6s $curve 0.2s both;
    }

    .checkmark-check {
      animation: reverseCheck 0.3s $curve 0.1s both;
    }
  }

  //Keyframes
  @keyframes stroke {
    100% {
      stroke-dashoffset: 0;
    }
  }

  @keyframes reverseCircle {
    from {
      stroke-dashoffset: 0;
    }

    to {
      stroke-dashoffset: 166;
    }
  }

  @keyframes reverseCheck {
    from {
      stroke-dashoffset: 0;
    }

    to {
      stroke-dashoffset: 48;
    }
  }
} */

/* ==========================================================================
2. Animated Checkbox Dark Mode
========================================================================== */

/* .is-dark {
    .animated-checkbox {
      .checkmark-wrap {
        .checkmark-circle,
        .checkmark-check {
          color: var(--primary);
        }

        .shadow-circle {
          border-color: var(--dark-sidebar-light-20);
        }
      }
    }
  }
} */

/* ==========================================================================
3. Checkbox list
========================================================================== */

.checkboxes-list {
  .list-item {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0;
    border: none;

    .animated-checkbox {
      .checkmark-wrap {
        position: relative;
      }
    }

    .item-meta {
      margin-left: 1rem;

      span {
        display: block;
        line-height: 1.4;

        &:first-child {
          font-family: var(--font-alt);
          font-size: 0.95rem;
          font-weight: 600;
          color: var(--dark-text);
        }

        &:nth-child(2) {
          font-family: var(--font);
          font-size: 0.9rem;
          color: var(--light-text);
        }
      }
    }
  }
}

/* ==========================================================================
4. Regular Checkbox / Radio
========================================================================== */

%controller {
  position: relative;
  font-family: var(--font);
  cursor: pointer;
  padding: 1em;

  &::selection {
    background: transparent;
  }

  input + span {
    position: relative;
    top: -1px;
    background: var(--white);
    content: '';
    display: inline-block;
    margin: 0 0.5em 0 0;
    padding: 0;
    vertical-align: middle;
    width: 1.4em;
    height: 1.4em;
    border: 1px solid var(--fade-grey-dark-8);
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;

    &::after {
      content: '';
      display: block;
      transform: scale(0);
      transition: transform 0.2s;
    }
  }

  @media screen and (min-width: 768px) {
    &:hover input + span {
      box-shadow: 0 2px 4px rgba(#000, 0.15);
    }
  }

  input:active + span {
    box-shadow: 0 4px 8px rgba(#000, 0.15);
  }

  input:focus + span {
    //box-shadow: 0 0 0 3px lightblue;
  }

  input:checked + span::after {
    transform: translate(-50%, -50%) scale(1) !important;
  }

  input {
    position: absolute;
    cursor: pointer;
    opacity: 0;
    transition: all 0.3s;
  }
}

.checkbox {
  @extend %controller;

  color: var(--light-text);

  &:hover {
    color: var(--light-text);
  }

  &.is-paddingless {
    padding: 0 !important;
  }

  &.is-circle {
    input + span {
      border-radius: var(--radius-rounded);
    }
  }

  &.is-solid {
    input + span {
      background: var(--fade-grey-light-3);
    }

    &.is-primary {
      input + span {
        border-color: var(--primary);
        background: var(--primary);

        &::after {
          color: var(--white);
        }
      }
    }

    &.is-success {
      input + span {
        border-color: var(--success);
        background: var(--success);

        &::after {
          color: var(--white);
        }
      }
    }

    &.is-info {
      input + span {
        border-color: var(--info);
        background: var(--info);

        &::after {
          color: var(--white);
        }
      }
    }

    &.is-warning {
      input + span {
        border-color: var(--warning);
        background: var(--warning);

        &::after {
          color: var(--white);
        }
      }
    }

    &.is-danger {
      input + span {
        border-color: var(--danger);
        background: var(--danger);

        &::after {
          color: var(--white);
        }
      }
    }
  }

  &.is-outlined {
    &.is-primary {
      input:checked + span {
        border-color: var(--primary);
      }

      input + span {
        &::after {
          color: var(--primary);
        }
      }
    }

    &.is-success {
      input:checked + span {
        border-color: var(--success);
      }

      input + span {
        &::after {
          color: var(--success);
        }
      }
    }

    &.is-info {
      input:checked + span {
        border-color: var(--info);
      }

      input + span {
        &::after {
          color: var(--info);
        }
      }
    }

    &.is-warning {
      input:checked + span {
        border-color: var(--warning);
      }

      input + span {
        &::after {
          color: var(--warning);
        }
      }
    }

    &.is-danger {
      input:checked + span {
        border-color: var(--danger);
      }

      input + span {
        &::after {
          color: var(--danger);
        }
      }
    }
  }

  input + span {
    border-radius: var(--radius-small);
    transition: all 0.3s;

    &::after {
      background-size: contain;
      position: absolute;
      top: 48%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      content: '\f00c';
      font-family: 'Font Awesome\ 5 Free';
      font-weight: 900;
      font-size: 0.7rem;
    }
  }
}

.radio {
  @extend %controller;

  color: var(--light-text);

  + .radio {
    margin-left: 0 !important;
  }

  &:hover {
    color: var(--light-text);
  }

  &.is-paddingless {
    padding: 0 !important;
  }

  &.is-square {
    input + span {
      border-radius: var(--radius);
    }
  }

  &.is-solid {
    input + span {
      background: var(--fade-grey-light-3);
    }

    &.is-primary {
      input + span {
        border-color: var(--primary);
        background: var(--primary);

        &::after {
          color: var(--white);
        }
      }
    }

    &.is-success {
      input + span {
        border-color: var(--success);
        background: var(--success);

        &::after {
          color: var(--white);
        }
      }
    }

    &.is-info {
      input + span {
        border-color: var(--info);
        background: var(--info);

        &::after {
          color: var(--white);
        }
      }
    }

    &.is-warning {
      input + span {
        border-color: var(--warning);
        background: var(--warning);

        &::after {
          color: var(--white);
        }
      }
    }

    &.is-danger {
      input + span {
        border-color: var(--danger);
        background: var(--danger);

        &::after {
          color: var(--white);
        }
      }
    }
  }

  &.is-outlined {
    &.is-primary {
      input:checked + span {
        border-color: var(--primary);
      }

      input + span {
        &::after {
          color: var(--primary);
        }
      }
    }

    &.is-success {
      input:checked + span {
        border-color: var(--success);
      }

      input + span {
        &::after {
          color: var(--success);
        }
      }
    }

    &.is-info {
      input:checked + span {
        border-color: var(--info);
      }

      input + span {
        &::after {
          color: var(--info);
        }
      }
    }

    &.is-warning {
      input:checked + span {
        border-color: var(--warning);
      }

      input + span {
        &::after {
          color: var(--warning);
        }
      }
    }

    &.is-danger {
      input:checked + span {
        border-color: var(--danger);
      }

      input + span {
        &::after {
          color: var(--danger);
        }
      }
    }
  }

  input + span {
    border-radius: 100%;

    &::after {
      background-size: contain;
      position: absolute;
      top: 49%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      content: '\f111';
      font-family: 'Font Awesome\ 5 Free';
      font-weight: 900;
      font-size: 0.6rem;
    }
  }
}

/* ==========================================================================
5. Regular Checkbox / Radio Dark mode
========================================================================== */

.is-dark {
  %controller {
    input + span {
      background-color: var(--dark-sidebar-light-2);
      border-color: var(--dark-sidebar-light-4);

      &::after {
        color: var(--dark-dark-text);
      }
    }

    input + span {
      border-color: var(--dark-sidebar-light-16);
    }
  }

  .checkbox,
  .radio {
    &.is-solid.is-primary {
      input + span {
        background-color: var(--primary) !important;
        border-color: var(--primary) !important;
      }
    }

    &.is-outlined.is-primary {
      input:checked + span {
        border-color: var(--primary) !important;

        &::after {
          color: var(--primary) !important;
        }
      }
    }
  }
}

/* ==========================================================================
6. H Toggle
========================================================================== */

.h-toggle {
  margin: 0 auto;
  width: 76px;
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  input {
    position: absolute;
    opacity: 0;
    cursor: pointer;

    &:checked ~ .toggler {
      background: var(--placeholder-light-10);
      border-color: var(--placeholder-light-10);

      .active,
      .inactive {
        transform: translateX(80%) rotate(360deg);
      }

      .active {
        opacity: 1;
      }

      .inactive {
        opacity: 0;
      }
    }
  }

  .toggler {
    position: relative;
    display: block;
    height: 16px;
    width: 50px;
    border: 1.6px solid var(--placeholder);
    border-radius: 100px;
    transition: all 0.3s;

    .active,
    .inactive {
      position: absolute;
      top: -14px;
      left: -10px;
      height: 40px;
      width: 40px;
      border-radius: var(--radius-rounded);
      background: var(--white);
      border: 1.6px solid transparent;
      box-shadow: var(--light-box-shadow);
      display: flex;
      justify-content: center;
      align-items: center;
      transform: translateX(0) rotate(0);
      transition: all 0.3s ease;

      i {
        color: var(--white);
        font-size: 18px;
      }

      svg {
        height: 16px;
        width: 16px;
      }
    }

    .inactive {
      background: var(--white);
      border-color: var(--success);
      color: var(--success);
      opacity: 1;
      z-index: 1;
    }

    .active {
      background: var(--white);
      border-color: var(--light-text);
      color: var(--light-text);
      opacity: 0;
      z-index: 0;
    }
  }
}

/* ==========================================================================
7. H Toggle Dark mode
========================================================================== */

.is-dark {
  .h-toggle {
    input {
      &:checked ~ .toggler {
        background: var(--dark-sidebar-light-2);
      }
    }

    .toggler {
      border-color: var(--dark-sidebar-light-25) !important;

      .active,
      .inactive {
        background: var(--dark-sidebar-light-2);
      }
    }
  }
}
